<script setup lang="ts">
import pageError from '@/assets/images/404.svg'
import { t } from '@/common/locale'
import { useRouter } from 'vue-router';
const route = useRouter()


const back = () => {
    route.back()
}
</script>

<template>
    <div class="error-container">
        <div class="error-container-content">
            <img width="350" :src="pageError" alt="" />
            <div class="error-message">{{ t('页面跑丢了') }}</div>
            <div class="error-back">
                <el-button @click="back">{{ t('返回') }}</el-button>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.error-container {
    width: 98%;
    height: 98%;
    display: flex;
    justify-content: center;
    align-items: center;

    .error-container-content {
        .error-message {
            display: flex;
            justify-content: center;
            font-size: 24px;
            color: var(--el-color-info);
        }

        .error-back {
            display: flex;
            padding: 20px;
            justify-content: center;
        }
    }
}
</style>
